import React, { Component } from 'react';

import { TabBar } from 'antd-mobile'

import { AppOutline, HeartOutline, TeamOutline, AppstoreOutline } from 'antd-mobile-icons'

import { withRouter, } from "react-router-dom";
import "../styles/Index.scss"


class MyTabbar extends Component {
    tabs = [
        {
            key: '/index/home',
            title: '店铺',
            icon: <AppOutline />,
        },
        {
            key: '/index/fenlei',
            title: '分类',
            icon: <AppstoreOutline />,
        },
        {
            key: '/index/shop_cart',
            title: '购物车',
            icon: <HeartOutline />,
        },
        {
            key: '/index/my',
            title: '个人中心',
            icon: <TeamOutline />,
        },
    ]

    render() {
        return (
            <div className="tabbar">
                <TabBar activeKey={this.props.location.pathname} onChange={(value) => {
                    // console.log(value);
                    // console.log(this.props.location.pathname);
                    // console.log(this.props);
                    this.props.history.push(value)
                }}>
                    {this.tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        );
    }
}


export default withRouter(MyTabbar)
// export default MyTabbar;

